<template>
	<view class="index">
		<!-- 	<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height:`calc(100vh - 50px - ${safeBottom}px / 2)`}"
				scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Home ref="home"></Home>
			</scroll-view>
		</view> -->
		<!-- <view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height:`calc(100vh - 50px - ${safeBottom}px / 2)`}"
				scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Menu ref="menu"></Menu>
			</scroll-view>
		</view> -->

		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<!-- <scroll-view class="custom-tabbar-page" :style="{height:`calc(100vh - ${safeBottom}px / 2)`}" scroll-y -->
			<scroll-view class="custom-tabbar-page" :style="{height: scrollHeight + 'px'}" scroll-y enable-back-to-top
				@scrolltolower="tabbarPageScrollLower">
				<Menu :config="scrollConfig" ref="menu"></Menu>
			</scroll-view>
		</view>

		<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height: scrollHeight + 'px'}" scroll-y enable-back-to-top
				@scrolltolower="tabbarPageScrollLower">
				<Todo :config="scrollConfig" :isPage="false" ref="todo"></Todo>
			</scroll-view>
		</view>

		<u-tabbar v-if="tabbarList.length > 1" class="tabbar" :value="currentIndex" :fixed="false" activeColor="#51d0d0"
			inactiveColor="#707070" @change="switchTabbar">
			<u-tabbar-item v-for="(item,index) in tabbarList" :text="item.title"
				:icon="currentIndex===index ? item.activeIcon : item.inactiveIcon"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	// import Home from './home.vue'
	import Menu from './menu.vue'
	import Todo from './todo.vue'

	export default {
		components: {
			// Home,
			Menu,
			Todo,
		},

		data() {
			return {
				// 底部tabbar菜单数据
				tabbarList: [
					// {
					// 	title: '首页',
					// 	activeIcon: 'home-fill',
					// 	inactiveIcon: 'home'
					// },
					{
						title: '应用',
						activeIcon: 'grid-fill',
						inactiveIcon: 'grid',
					},
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: [],
				safeBottom: 0, // 安全底部
				scrollHeight: 500,
				scrollConfig: {
					scrollHeight: 500,
					tabbarHeight: 50,
				},
				showTabbar: false,
				options: {},
			}
		},
		onShow() {
			// 触发审批待办的onShow
			if (this.$refs.todo && this.$refs.todo.onMyShow && this.currentIndex == 1) {
				this.$refs.todo.onMyShow();
			}

		},
		onLoad(options) {
			console.log(options);
			this.options = options;
			let systemInfo = uni.getSystemInfoSync();
			console.log(systemInfo);
			this.scrollHeight = systemInfo.screenHeight
			this.scrollConfig.scrollHeight = systemInfo.screenHeight

			// 根据options.moduleID 是否为 1，判断是否是进销存
			if (options.moduleID == 1) { // 进销存展示待办
				this.tabbarList.push({
					title: '审批待办',
					activeIcon: 'clock-fill',
					inactiveIcon: 'clock'
				})
			}

			console.log(options);
			this.$store.commit('ChangeAndSetStateData', {
				Name1: 'CurrModuleID',
				data: options.moduleID
			});
			console.log(this.$store.state.CurrModuleID);

			/* const index = Number(options.index || 0)
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
				return index === tabbar_index
			});
			console.log(this.tabberPageLoadFlag);
			this.switchTabbar(index) */
		},
		mounted() {
			let that = this;

			that.$nextTick(() => {
				// setTimeout(() => {
					const index = Number(that.options.index || 0)
					console.log(index);
					// 根据底部tabbar菜单列表设置对应页面的加载情况
					that.tabberPageLoadFlag = that.tabbarList.map((item, tabbar_index) => {
						return index === tabbar_index
					});
					console.log(that.tabberPageLoadFlag);
					that.switchTabbar(index)

					let routes = getCurrentPages(); //当前页面栈
					console.log(routes.length);
					// 存储页面栈信息
					that.$store.commit('ChangeAndSetStateData', {
						Name1: 'appConfigInfo.routePageCurrent',
						data: routes.length
					});

					that.getSafeBottom();

					that.getScollHeightFun();

				// }, 500);
			})
		},
		methods: {
			getScollHeightFun() {

				var that = this;
				let windowHeight = 0;
				let navbarHeight = 0;

				let sysinfo = uni.getSystemInfoSync();
				// uni.getSystemInfo({ // 获取当前设备的具体信息
				// 	success: (sysinfo) => {
				// 总盒子高度
				windowHeight = sysinfo.windowHeight;

				// 当开启底栏是打开
				// 底部栏高度
				if (that.tabbarList.length > 1) {

					uni.createSelectorQuery().select('.tabbar').boundingClientRect(data => {
						let tabbarHeight = data.height + sysinfo.safeAreaInsets.bottom;
						let scrollHeight = windowHeight - data.height - sysinfo
							.safeAreaInsets.bottom;

						that.$set(that.scrollConfig, 'tabbarHeight', tabbarHeight);
						that.$set(that.scrollConfig, 'scrollHeight', scrollHeight);
						that.scrollHeight = scrollHeight;
					}).exec();

				} else {
					that.$set(that.scrollConfig, 'tabbarHeight', 0);
					that.$set(that.scrollConfig, 'scrollHeight', windowHeight);
					that.scrollHeight = windowHeight;

				}


				// 	}
				// });
			},
			// 切换导航
			switchTabbar(index) {
				this._switchTabbarPage(index)
			},

			// 导航页面滚动到底部
			tabbarPageScrollLower(e) {},

			// 切换导航页面
			_switchTabbarPage(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index];
				if (index == 0) {
					// 简单处理，当选中项为0时，将第二项的状态改为false
					this.tabberPageLoadFlag[1] = false;
				}

				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				this.currentIndex = index
				// console.log(this.tabberPageLoadFlag);
			},

			// 获取安全底部高度
			getSafeBottom() {
				let that = this;
				let safeareaBottom = uni.getStorageSync('safeareaBottom');
				// console.log(safeareaBottom);
				if (safeareaBottom) {
					that.safeBottom = safeareaBottom;
				} else {
					uni.getSystemInfo({
						success: function(res) {
							if (res.safeAreaInsets.bottom) {
								that.safeBottom = res.safeAreaInsets.bottom;
								uni.setStorageSync('safeareaBottom', that.safeBottom)
							}
							// console.log(that.safeBottom);
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		overflow: hidden;
		height: 100vh;
	}

	// .custom-tabbar-page {
	// 	height: calc(100vh - (50px + env(safe-area-inset-bottom) / 2));
	// }
</style>